<template>
  <zm-view ref="view" background="#fff" @scroll="handleViewScroll">
    <zm-navbar :border-bottom="false" :back-icon-color="navbarTextColor" gradient-heigt="100" gradient immersive background="#ffffff" @height="(height) => (navbarHeight = height)">
      <view slot="right" class="flex items-center">
        <zm-icon v-if="cinemaInfo.collectionType == 1" name="star-circle" size="40rpx" color="#FFB847" @click="onClickCollection"></zm-icon>
        <zm-icon v-else name="star-circle-o" size="40rpx" :color="navbarTextColor" @click="onClickCollection"></zm-icon>
        <!-- #ifndef WEB -->
        <zm-button height="40rpx" width="40rpx" color="transparent" open-type="share" custom-class="ml-20 mt-4">
          <zm-icon name="share-circle" size="40rpx" :color="navbarTextColor"></zm-icon>
        </zm-button>
        <!-- #endif -->
      </view>
    </zm-navbar>
    <!-- 顶部内容 -->
    <view class="header-wrap" :style="{ paddingTop: navbarHeight + 8 + 'px' }">
      <image v-if="cinemaInfo.cinemaCode == '35010731'" class="header-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/scheduling-header-bg-own.png')" mode="scaleToFill" />
      <image v-else class="header-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/scheduling-header-bg.png')" mode="scaleToFill" />
      <view class="flex items-center justify-between">
        <view class="flex flex-1 flex-col mr-50 relative">
          <text class="font-36 font-700 text-white text-row-1">{{ cinemaInfo.cinemaName }}</text>
          <text class="text-white mt-10 text-row-2">{{ cinemaInfo.address }}</text>
        </view>
        <zm-icon :name="useImage('/zuimei-film-oss/1.0.0/icons/location-icon.png')" size="80rpx" @click="onClickMap"></zm-icon>
      </view>
      <view v-if="cinemaInfo.tTagStyle && cinemaInfo.tTagStyle.length" class="flex flex-wrap mt-12 z-10">
        <text v-for="(tag, tagIndex) in cinemaInfo.tTagStyle" :key="tagIndex" class="tag-badge mt-6" :style="{ color: useColor(tag.color || 'theme') }">{{ tag.cinemaTag }}</text>
      </view>
    </view>
    <!-- 影片信息 -->
    <view class="film-wrap">
      <block v-if="films.length">
        <swiper class="swiper" :indicator-dots="false" :current="filmIndex" :autoplay="false" indicator-color="#8799a3" indicator-active-color="#0081ff" @change="handleFilmChange">
          <swiper-item v-for="(item, index) in films" :key="index" class="swiper-item" @click="handleClickFilm(item, index)">
            <view class="swiper-item-image" :class="{ 'is-active': index === filmIndex }">
              <u-image :width="index === filmIndex ? '170rpx' : '134rpx'" :height="index === filmIndex ? '238rpx' : '186rpx'" radius="12rpx" :src="item.cover" mode="scaleToFill"></u-image>
            </view>
          </swiper-item>
        </swiper>
        <view class="flex items-center justify-center font-32 font-700 mt-35">
          <text>{{ films[filmIndex].filmName }}</text>
          <view v-if="films[filmIndex] && films[filmIndex].preSaleFlag == 1" class="text-theme ml-24">
            <text>{{ films[filmIndex].wantView | formatNumberWithUnit }}</text>
            <text>人想看</text>
          </view>
          <view v-else class="text-theme ml-24">
            <text v-if="$check.isNumber(films[filmIndex].score) && Number(films[filmIndex].score)">{{ films[filmIndex].score }}分</text>
            <text v-else>暂无评分</text>
          </view>
        </view>
        <view class="font-22 text-999 text-center mt-12 px-24 text-row-1">
          <text v-if="films[filmIndex].area" class="px-6">{{ films[filmIndex].area }}</text>
          <text v-if="films[filmIndex].duration" class="px-6">| {{ films[filmIndex].duration }}分钟</text>
          <text v-if="films[filmIndex].type" class="px-6">| {{ films[filmIndex].type }}</text>
          <text v-if="films[filmIndex].cast" class="px-6">| {{ films[filmIndex].cast }}</text>
        </view>
        <zm-tabs
          v-model="planDate"
          :list="planDates"
          text-key="date"
          inactive-weight="bold"
          active-weight="bold"
          value-key="originalDate"
          scrollable
          @change="handleChangePlanDate"
        ></zm-tabs>
      </block>
      <zm-empty v-else text="暂无电影信息"></zm-empty>
    </view>
    <!-- 时间段列表 -->
    <view v-if="films.length" class="time-wrap">
      <view v-if="coupons.length" class="receive-wrap" @click="receiveVisible = true">
        <scroll-view scroll-x style="width: calc(100% - 150rpx); height: 40rpx" class="py-2">
          <view class="flex flex-1 my-2 font-bold">
            <view v-for="(item, index) in coupons" :key="index" class="receive-tag" :class="{ 'receive-tag--receive': item.receiveStatus == 1 || item.hasStock == 2 }">
              <view class="flex items-center receive-text text-row-1 flex items-center">
                <text>{{ item.activityTag }}</text>
                <text v-if="item.exValue > 0" class="ml-4"> ¥{{ item.exValue }}</text>
              </view>
              <view class="receive-button">{{ item.receiveStatus == 1 ? "已领" : item.hasStock == 2 ? "已抢光" : "领取" }}</view>
            </view>
          </view>
        </scroll-view>
        <view class="flex items-center flex-shrink-0">
          <text class="text-999 font-24">{{ coupons.length }}个优惠</text>
          <zm-icon name="arrow" weight="bold" color="#999" custom-class="ml-4"></zm-icon>
        </view>
      </view>

      <view v-for="(item, index) in cinemaPlan" :key="index" class="item-wrap" @click="handleBuy(item)">
        <view class="flex flex-col flex-1 mr-24">
          <view class="flex items-center">
            <text class="font-36 font-700 w-140 flex-shrink-0">{{ item.sTime }}</text>
            <text class="font-28 text-row-1">{{ item.copyLanguage }}{{ item.copyType }}</text>
          </view>
          <view class="flex items-center">
            <text class="font-22 text-999 w-140 flex-shrink-0">{{ item.eTime }}散场</text>
            <text class="font-22 text-999 text-row-1">{{ item.hallName }}{{ item.hallType }}</text>
          </view>
        </view>
        <view class="flex flex-col mr-35 flex-shrink-0">
          <view v-if="item.couponActValue > 0" class="flex items-center text-price price-bg">
            <text class="mr-4 font-20 font-500 mt-2">券后价</text>
            <text class="text-price-mini-before text-price font-32 font-bold">{{ couponActValue(item) | formatDigit }}</text>
            <text class="font-20 ml-4 mt-6">起</text>
          </view>
          <view v-else class="flex items-center">
            <text class="text-price-before text-price font-32 font-bold">{{ item.areaMinPrice || item.salePrice | formatDigit }}</text>
            <text class="text-999 font-20 ml-4 mt-6">起</text>
          </view>
          <text v-if="item.ecPrice > 0" class="text-999 font-22">电商价¥{{ item.ecPrice | formatDigit }}起</text>
        </view>
        <zm-button type="primary" size="small" height="54rpx" width="96rpx" round @click="handleBuy(item)">购票</zm-button>
      </view>
      <zm-empty v-if="films.length && cinemaPlan.length === 0" text="暂无可售的场次"></zm-empty>
    </view>
    <!-- 领取弹窗 -->
    <zm-popup :show.sync="receiveVisible" mode="bottom" closeable background="#F4F6F7" height="43vh">
      <view slot="header" class="font-36 font-bold text-center py-34">领券优惠</view>
      <view class="receive-list">
        <view v-for="(item, index) in coupons" :key="index" class="item-wrap" :class="{ 'item-wrap--disabled': item.hasStock == 2, 'item-wrap--receive': item.receiveStatus == 1 }">
          <view class="item-left">
            <text class="money-text">{{ item.exValue | formatDigit }}</text>
            <text class="use-text font-500 text-center">{{ useRule(item) | formatDigit }}</text>
            <image v-if="item.hasStock == 1" :src="useImage('/zuimei-film-oss/1.0.0/images/receive-bg.png')" class="receive-bg" mode="scaleToFill"></image>
            <image v-else :src="useImage('/zuimei-film-oss/1.0.0/images/receive-bg-gray.png')" class="receive-bg" mode="scaleToFill"></image>
          </view>
          <view class="item-right">
            <view class="flex-1 h-full flex flex-col justify-around mr-24">
              <text class="name-text text-row-2 font-30 font-bold">{{ item.name }}</text>
              <text v-if="item.receiveStatus == 1" class="date-text text-666 font-500">{{ item.endDate | formatDate("YYYY.MM.DD") }}到期</text>
              <text v-else class="date-text text-666 font-500">{{ item.timeName }}</text>
            </view>
            <zm-button v-if="item.hasStock == 2" text-size="26rpx" height="56rpx" width="146rpx" round size="small" disabled color="#cccccc" text-weight="bold">已抢光</zm-button>
            <image v-else-if="item.receiveStatus == 1" :src="useImage('/zuimei-film-oss/1.0.0/images/ylq.png')" class="ylq-image" mode="scaleToFill"></image>
            <zm-button v-else text-size="26rpx" height="56rpx" width="146rpx" round size="small" text-weight="bold" @click="handleReceiveCoupon(item)">领取</zm-button>
          </view>
        </view>
      </view>
    </zm-popup>
    <!-- 收藏成功提示 -->
    <zm-dialog ref="dialog" width="632rpx">
      <view class="flex flex-col justify-center items-center">
        <view class="text-666 font-28 text-center">影院收藏成功后，会在列表优先展示哦</view>
        <image class="cinema-collection-image" :src="useImage('/zuimei-film-oss/1.0.0/images/cinema-collection.png')" mode="" />
      </view>
    </zm-dialog>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import { mapGetters } from "vuex"
export default {
  mixins: [page],
  data() {
    return {
      scrollTop: 0,
      navbarTextColor: "#ffffff",
      cinemaId: "",
      cinemaInfo: { tTagStyle: [] },
      navbarHeight: 0,
      films: [],
      filmId: "",
      filmIndex: 0,
      planDates: [],
      planDate: "",
      coupons: [],
      cinemaPlan: [],
      planDateTemp: "",
      receiveVisible: false,
      swiperAnimationfinish: false
    }
  },
  computed: {
    ...mapGetters(["login", "baseInfo"]),
    couponActValue() {
      return (data) => {
        return Math.max((data.areaMinPrice || data.salePrice) - data.couponActValue, 0).toFixed(2)
      }
    },
    useRule() {
      return (data) => {
        if (data.discountType == "1") return "无门槛"
        if (data.discountType == "2") return `满${uni.$formatDigit(data.fullAmount)}元可用`
        if (data.discountType == "3") return `满${data.ticketNum}个座位`
        return `满${uni.$formatDigit(data.fullAmount)}元可用`
      }
    }
  },
  onLoad(options) {
    this.filmId = options.filmId
    this.cinemaId = options.cinemaId
    this.activityId = options.activityId || ""
    this.planDateTemp = options.planDate || ""
    this.handleRefresh(options.planDate)
  },
  methods: {
    async handleRefresh() {
      await this.handleGetCinemaDes()
      await this.handleGetHotFilmList()
      await this.handleGetCinemaPlanDate()
      await this.handlGetCinemaSendCouponInfo()
    },
    // 页面滚动
    handleViewScroll(scrollTop) {
      this.scrollTop = scrollTop
      if (scrollTop > 80) {
        this.navbarTextColor = "#333333"
        uni.setNavigationBarColor({ frontColor: "#000000", backgroundColor: "#ffffff" })
      } else {
        this.navbarTextColor = "#ffffff"
        uni.setNavigationBarColor({ frontColor: "#ffffff", backgroundColor: "#000000" })
      }
    },
    handleFilmChange({ detail }) {
      setTimeout(() => {
        this.filmId = this.films[detail.current].filmId
        this.filmIndex = detail.current
        this.handleGetCinemaPlanDate()
      }, 100)
    },
    // 点击电影
    handleClickFilm(film, index) {
      uni.$debounce(
        () => {
          if (this.filmIndex === index) {
            this.toView({
              url: "pages/cinema/film-info/film-info",
              params: {
                filmId: film.filmId,
                filmCode: film.filmCode,
                hideBuyButton: "1"
              }
            })
          } else {
            this.filmIndex = index
            this.handleGetCinemaPlanDate()
          }
        },
        500,
        true
      )
    },
    // 点击收藏影院
    async onClickCollection() {
      await uni.$api.cinema.cinemaCollection({
        cinemaId: this.cinemaId,
        collectionId: this.cinemaInfo.collectionId,
        collectionType: this.cinemaInfo.collectionType == 1 ? "0" : "1"
      })
      await this.handleGetCinemaDes()
      if (this.cinemaInfo.collectionType == 1) {
        this.$refs.dialog.open({
          title: "影院收藏成功",
          confirmButtonText: "我知道了"
        })
      } else {
        uni.$toast("已取消该影院收藏")
      }
    },
    // 点击分享
    // onClickShare() {},
    // 点击地图按钮
    onClickMap() {
      uni.openLocation({
        name: this.cinemaInfo.cinemaName,
        address: this.cinemaInfo.address,
        latitude: +this.cinemaInfo.latitude,
        longitude: +this.cinemaInfo.longitude,
        success: () => {},
        fail: () => {}
      })
      // this.toView({
      //   url: "pages/utils/map/map",
      //   params: {
      //     title: "影院位置",
      //     name: this.cinemaInfo.cinemaName,
      //     address: this.cinemaInfo.address,
      //     latitude: this.cinemaInfo.latitude,
      //     longitude: this.cinemaInfo.longitude,
      //     markerTitle: this.cinemaInfo.cinemaName
      //   }
      // })
    },

    async handlGetCinemaSendCouponInfo() {
      if (this.baseInfo.channelType == 2) {
        this.coupons = await uni.$api.sendCouponActivity.getCinemaSendCouponInfo({ cinemaId: this.cinemaId })
      }
    },
    async handleGetHotFilmList() {
      this.films = await uni.$api.film.getHotFilmList({ cinemaId: this.cinemaId })
      if (this.films?.length && this.filmId) {
        this.filmIndex = this.films.findIndex((item) => item.filmId == this.filmId)
      }
    },
    async handleGetCinemaDes() {
      this.cinemaInfo = await uni.$api.cinema.getCinemaDes({ cinemaId: this.cinemaId })
      this.starIconColor = this.cinemaInfo.collectionType == 1 ? "#ffb847" : "#ffffff"
    },
    async handleGetCinemaPlanDate() {
      if (this.films[this.filmIndex]) {
        const res = await uni.$api.plan.cinemaPlanDate({ cinemaId: this.cinemaId, filmCode: this.films[this.filmIndex].filmCode, activityId: this.activityId, isFill: 0 })
        this.planDates = res.map((date) => {
          return { date: uni.$formatDayWeekDesc(date) + uni.$formatDate(date, "MM月DD日"), originalDate: date }
        })
        this.planDate = this.planDateTemp || this.planDates[0]?.originalDate
        this.planDateTemp = ""
        this.handleChangePlanDate()
      }
    },
    async handleGetCinemaPlan() {
      if (this.films[this.filmIndex]) {
        this.cinemaPlan = await uni.$api.plan.cinemaPlan({
          activityId: this.activityId,
          cinemaId: this.cinemaId,
          filmCode: this.films[this.filmIndex].filmCode,
          planDate: this.planDate
        })
      }
    },
    // 领取优惠券
    async handleReceiveCoupon(data) {
      if (this.login) {
        await uni.$api.sendCouponActivity.receiveCoupon({ couponActId: data.couponActId, saleOrderNo: data.saleOrderNo })
        this.handlGetCinemaSendCouponInfo()
      } else {
        this.$toast("请先登录")
        this.$refs.view.auth()
        this.receiveVisible = false
      }
    },
    handleChangePlanDate() {
      this.handleGetCinemaPlan()
    },
    handleBuy(data) {
      this.toView({
        url: "pages/cinema/cinema-seat/cinema-seat",
        login: true,
        mobile: true,
        params: {
          cinemaId: this.cinemaId,
          planKey: data.planKey,
          sDate: data.sDate,
          activityId: this.activityId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header-wrap {
  display: flex;
  position: relative;
  padding: 60rpx 24rpx;
  flex-direction: column;

  .header-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .tag-badge {
    height: 28rpx;
    display: flex;
    font-size: 18rpx;
    margin-right: 6rpx;
    padding: 2rpx 6rpx;
    border-radius: 6rpx;
    color: $theme-color;
    align-items: center;
    border: 1rpx solid currentColor;
  }
}

.film-wrap {
  min-height: 300rpx;
  position: relative;
  margin-top: -24rpx;
  padding-top: 64rpx;
  background-color: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;

  .swiper {
    height: 238rpx;

    .swiper-item {
      left: calc(375rpx - 85rpx);
      width: 170rpx !important;
      height: 238rpx !important;
      display: flex;
      align-items: center;
      justify-content: center;

      .swiper-item-image {
        width: 134rpx !important;
        height: 186rpx !important;
        overflow: hidden;
        display: flex;
        align-items: center;
        border-radius: 12rpx;
        justify-content: center;
        transition: all 0.3s ease;

        &.is-active {
          width: 170rpx !important;
          height: 238rpx !important;
        }
      }
    }
  }
}

.time-wrap {
  flex: 1;
  padding: 20rpx 24rpx;
  background-color: #f4f6f7;
  .w-140 {
    width: 140rpx;
  }
  .receive-wrap {
    padding: 24rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    background-color: #fff;
    justify-content: space-between;
    .receive-tag {
      width: max-content;

      display: flex;
      font-size: 20rpx;
      margin-right: 8rpx;
      align-items: center;
      border-radius: 6rpx;
      margin-right: 10rpx;
      justify-content: space-between;
      &--receive {
        border-color: #feb6ae !important;
        .receive-text {
          color: #feb8af !important;
          border-color: #feb8af !important;
        }
        .receive-button {
          color: #feb8af !important;
          background: #ffedeb !important;
          border-color: #feb8af !important;
        }
      }
      .receive-text {
        height: 30rpx;
        color: #fe4f3b;
        padding: 0 8rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        border: 1rpx solid #fe4f3b;
        border-right: none;
        border-top-left-radius: 4rpx;
        border-bottom-left-radius: 4rpx;
      }
      .receive-button {
        height: 30rpx;
        color: #fff;
        display: flex;
        padding: 0 8rpx;
        font-weight: bold;
        align-items: center;
        line-height: 30rpx;
        border: 1rpx solid #fe4f3b;
        background-color: #fe4f3b;
        border-top-right-radius: 4rpx;
        border-bottom-right-radius: 4rpx;
      }
    }
  }
  .item-wrap {
    display: flex;
    padding: 20rpx;
    align-items: center;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    background: #ffffff;

    .width-270 {
      width: 280rpx;
    }
    .price-bg {
      height: 44rpx;
      padding: 0 24rpx;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(254, 59, 59, 0.1) 100%);
      border-radius: 0rpx 10rpx 8rpx 0rpx;
    }
  }
}
.cinema-collection-image {
  width: 374rpx;
  height: 280rpx;
  margin-top: 24rpx;
}
.receive-list {
  display: grid;
  padding: 0 24rpx;
  grid-template-columns: repeat(1, 1fr);
  .item-wrap {
    display: flex;
    height: 180rpx;
    align-items: center;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    box-shadow: inset 1rpx 1rpx #eee;
    &--disabled {
      background-color: #eeeeee;
      .money-text {
        color: #999999 !important;
      }
      .use-text {
        color: #cccccc !important;
      }
      .name-text {
        color: #999999 !important;
      }
      .name-text {
        color: #999999 !important;
      }
      .date-text {
        color: #cccccc !important;
      }
    }
    .item-left {
      width: 164rpx;
      height: 100%;
      display: flex;
      flex-shrink: 0;
      position: relative;
      text-align: center;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      border-top-left-radius: 20rpx;
      border-bottom-left-radius: 20rpx;
      border-right: 1rpx dashed #eee;
      &::after,
      &::before {
        z-index: 1;
        content: " ";
        right: -14rpx;
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        position: absolute;
        background-color: var(--page-color);
      }
      &::after {
        top: -14rpx;
      }
      &::before {
        bottom: -14rpx;
      }
      .receive-bg {
        top: 0;
        left: 0;
        width: 120rpx;
        height: 180rpx;
        position: absolute;
      }
      .money-text {
        color: #de281a;
        font-size: 50rpx;
        font-weight: bold;
      }
    }
    .item-right {
      flex: 1;
      height: 100%;
      display: flex;
      padding: 26rpx;
      align-items: center;
      justify-content: space-between;
      .ylq-image {
        width: 116rpx;
        height: 116rpx;
        margin-right: 14rpx;
      }
    }
  }
}
</style>
